<template>
	<view class="content">
		<view class="platform shadow">
			<view class="title">站点分类</view>
			<view class="body">
				<view v-for="item in platformList" :key="item.id" class="section" @click="toPlatform(item)">
					<view class="circle">
						<img class="icon" :src="item.src"/>
					</view>
					<text class="bottom-text">{{ item.name }}</text>
				</view>
				<!-- 添加的占位视图 -->
				<view class="placeholder"></view>
			</view>
		</view>
	</view>
</template>


<script setup>
// JS部分根据需要添加

import sheep from "@/sheep";

const props = defineProps({
	platformList: {
		type: Array,
		default() {},
	},
});

function toPlatform(item) {
	if (item.type === 0) {
		// 煤炉
		sheep.$router.go('/pages/goods/list')
	} else if (item.type === -999) {
		// 外部链接
		sheep.$router.go('/pages/order/addOrder')
	} else {
		// sheep.$helper.toast('平台对接中，敬请期待~')
	}
}

</script>

<style lang="scss" scoped>
.content {
	padding: 5rpx;
}

.placeholder {
	width: 90px; /* 根据需要调整，确保这个宽度足够让最后一个section完整显示 */
	height: 1px; /* 高度可以很小，因为我们只需要它的宽度 */
	visibility: hidden; /* 使其不可见 */
}

.platform {
	width: 93.5%;
	border-radius: 20rpx;
	//box-shadow: 1px 1px 30px #cbcbcb;
	padding: 20rpx;
}

.body {
	display: flex;
	justify-content: left; /* 居中显示元素 */
	align-items: center;
	flex-direction: row;
	border-radius: 20rpx;
	padding-top: 20rpx;
	width: 100%; /* 确保宽度适合父容器 */
	gap: 20rpx; /* 设置元素之间的间距，可以根据需要调整 */
	overflow-x: auto; /* 允许横向滚动 */
}


.title {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 28.96px;
	color: rgba(0, 0, 0, 1);
	text-align: left;
	vertical-align: top;
}

.section {
  display: flex;
	justify-content: center; /* 居中显示图标和文字 */
	align-items: center;
  flex-direction: column;
	padding-left: 20rpx;
	padding-right: 20rpx;
	border-radius: 15rpx;
	//flex: 1; /* 允许每个section根据其内容自动调整大小 */
	width: 90px; /* 限制最大宽度以保持圆形 */
	height: 170px;
	margin: 5rpx; /* 为section之间提供一些间隔 */
	background-color: white; /* 圆形背景为白色 */
	border: 1px solid black; /* 圆形边框为黑色 */

  .bottom-text {
    font-size: 30rpx;
    margin-top: 5rpx;
    font-weight: 500;
  }
}

.circle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 90px;
	height: 90px;
	border-radius: 50%; /* 创建圆形效果 */
	background-color: white; /* 圆形背景为白色 */
	border: 1px solid black; /* 圆形边框为黑色 */
}

.icon {
	width: 100rpx;
	height: 50rpx;
}
</style>


